<!-- 学社 - 动态 - 邀请 -->
<template>
  <view class="relative w-full">
    <!-- 背景图 -->
    <view class="w-full min-h-screen absolute left-0 top-0 z-1">
      <image class="w-full min-h-screen" src="/static/images/common/bg_invite.png" />
    </view>
    <view class="w-full absolute left-0 top-0 z-4">
      <view class="relative flex items-center justify-center"
        :style="{ height: backIconHeight + 'px', marginTop: backIconTop + 'px' }">
        <u-icon class="ic-back" name="arrow-left" color="#666" size="34" @click="onBack"></u-icon>
        <view class="text-34 c-#000">邀请</view>
      </view>
      <u-line margin="28rpx 0 0" class="w-full" color="#eee" :hair-line="false" />
    </view>
    <!-- 主体 -->
    <view class="relative z-3 px-4 pt-26">
      <view class="px-4 pt-5 pb-6 bg-poster">
        <view class="flex items-center">
          <u-image width="80" height="80" shape="circle" :src="userInfo.avatar"></u-image>
          <view class="ml-3 flex flex-col justify-center">
            <view class="text-32 c-white mb-1">{{ userInfo.nickname }}</view>
            <view class="text-24 c-white">邀请您一起加入八零学社学习专业外贸知识</view>
          </view>
        </view>
        <view class="mt-6 rounded-md bg-white p-4">
          <view class="flex justify-between mb-3">
            <view class="flex flex-col flex-1">
              <view class="text-xl font-bold">{{ state.detailData?.club_name }}</view>
              <view class="mb-1 c-#999 text-28">ID：{{ state.detailData?.clubId }}</view>
              <u-image v-if="state.detailData?.creator?.company_auth" width="144" height="32"
                src="/static/images/home/img_company_auth.png"></u-image>
            </view>
            <u-image class="ml-1 flex-shrink" width="222" mode="widthFix" border-radius="12"
              :src="state.detailData?.cover_image"></u-image>
          </view>
          <text class="c-#666 text-xs">{{ state.detailData?.club_introduce }}</text>
        </view>
        <view class="mt-4 rounded-md bg-white p-4">
          <view class="flex justify-between">
            <view class="flex-1 text-single">
              <view class="text-40 c-#333 mb-2 font-bold">八零学社</view>
              <view class="text-24 c-#666 text-single">扫描微信二维码，加入专属外贸学社</view>
            </view>
            <u-image width="120" height="120" :src="qrcode"></u-image>
          </view>
        </view>
      </view>
      <view class="flex items-center mt-4">
        <view class="btn btn-save" @click="onSave">保存图片</view>
        <view class="w-32"></view>
        <view class="btn btn-share" @click="state.showSharePoup = true">微信分享</view>
      </view>
    </view>
    <!-- 画板 -->
    <l-painter ref="painter" css="width: 690rpx; max-height: 890rpx;" custom-style="position: fixed; left: 200%">
      <l-painter-view css="height: 100%; padding: 40rpx 32rpx 48rpx; background: #F4AF22; radius: 12rpx;">
        <l-painter-view css="display: flex; align-items:center;">
          <l-painter-image :src="userInfo.avatar" css="width: 80rpx; height: 80rpx; radius: 50%" />
          <l-painter-view css="display: flex; flex-direction: column; justify-content: center; margin-left: 24rpx;">
            <l-painter-text :text="userInfo.nickname"
              css="font-size: 32rpx; color: #fff; margin-bottom: 8rpx; line-clamp: 1;" />
            <l-painter-text text="邀请您一起加入八零学社学习专业外贸知识" css="font-size: 24rpx; color: #fff;" />
          </l-painter-view>
        </l-painter-view>
        <l-painter-view css="margin-top: 48rpx; radius: 12rpx; background: #ffffff; padding: 32rpx;">
          <l-painter-view css="width: 100%; display: flex; justify-content: space-between; margin-bottom: 24rpx;">
            <l-painter-view css="display: flex; flex-direction: column;width:60%">
              <l-painter-text :text="state.detailData?.club_name"
                css="font-size: 40rpx; font-weight: 700;" />
              <l-painter-text :text="`ID：${state.detailData?.clubId}`" css="color: #999; font-size: 28rpx;" />
              <l-painter-image v-if="state.detailData?.creator?.company_auth"
                css="width: 144rpx; height: 32rpx;object-fit:none"
                src="/static/images/home/img_company_auth.png"></l-painter-image>
            </l-painter-view>
            <l-painter-image css="margin-left: 8rpx; width: 222rpx;radius: 12rpx;flex-shrink:0;object-fit:contain"
              :src="state.detailData?.cover_image"></l-painter-image>
          </l-painter-view>
          <l-painter-text :text="state.detailData?.club_introduce"
            css="color: #666; font-size: 24rpx; line-height: 32rpx;" />
        </l-painter-view>
        <l-painter-view css="margin-top: 32rpx; radius: 12rpx; background: #ffffff; padding: 32rpx;">
          <l-painter-view css=" display: flex; justify-content: space-between;">
            <l-painter-view css="flex: 1; maxLines: 1">
              <l-painter-text text="八零学社" css="font-size: 40rpx; color: #333; margin-bottom: 16rpx;font-weight:bold" />
              <l-painter-text text="扫描微信二维码，加入专属外贸学社" css="font-size: 24rpx; color: #666; maxLines: 1" />
            </l-painter-view>
            <l-painter-image css="width: 120rpx; height: 120rpx" :src="qrcode"></l-painter-image>
          </l-painter-view>
        </l-painter-view>
      </l-painter-view>
    </l-painter>
    <z-bottom-popup :show="state.showSharePoup" @close="state.showSharePoup = false">
      <view class="pt-4 px-4 flex flex-col items-center">
        <view class="c-#333 text-32 mb-5">微信分享</view>
        <view class="flex justify-between mb-4">
          <view class="bg-#F6F6F6 rounded-md w-330 h-286 flex-1 flex flex-col justify-center items-center mr-4"
            @click="shareFriend">
            <image class="w-96 h-96 rounded-full" src="/static/images/common/img_wx.png" />
            <view class="mt-4 c-#333 text-32 font-bold">分享给好友</view>
          </view>
          <!-- <view class="bg-#F6F6F6 rounded-md w-330 h-286 flex-1 flex flex-col justify-center items-center"
            @click="shareFriendcricle">
            <image class="w-96 h-96 rounded-full" src="/static/images/common/img_friend.png" />
            <view class="mt-4 c-#333 text-32 font-bold">分享到朋友圈</view>
          </view> -->
        </view>
        <view class="w-full pb-1">
          <view class="btn-submit" @click="state.showSharePoup = false">取消</view>
        </view>
      </view>
    </z-bottom-popup>
    <u-modal v-model="state.showPosterModal" :show-title="false" :show-confirm-button="false" :show-cancel-button="false">
      <view class="slot-content">
        <image class="w-full h-full rounded-2" :src="state.poster" mode="widthFix"></image>
        <view class="w-full flex items-center">
          <view class="btn btn-save mr-1" @click="state.showPosterModal = false">取消</view>
          <view class="btn btn-share" @click="onSave">保存图片</view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import useSaveImage from '@/common/hooks/useSaveImage'
import { useUserStore } from '@/store/user'
import { getSocietyDetail, getSocietyQrcode } from "@/common/http/module/society.js";

const userStore = useUserStore()
const painter = ref()
const qrcode = ref('')

const state = reactive({
  club_id: '', // 学社id
  detailData: null,
  showSharePoup: false, // 分享poup
  poster: '', // 分享海报
});

const backIconTop = uni.getMenuButtonBoundingClientRect().top
const backIconHeight = uni.getMenuButtonBoundingClientRect().height
const userInfo = computed(() => userStore.userInfo)

// 返回
function onBack() {
  uni.navigateBack()
}

function loadData(id) {
  // 获取学社详情
  getSocietyDetail(id).then((res) => {
    state.detailData = res.data;
  });

  getSocietyQrcode(id).then(res => {
    const data = res.data
    if (data) {
      qrcode.value = data
    }
  })
}

function onSave() {
  nextTick(() => {
    uni.showLoading({
      title: '正在保存'
    })
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      console.log('canvasToTempFilePath', res)
      useSaveImage(res.tempFilePath)
      state.showPosterModal = false
    })
  })
}

// 分享微信好友
function shareFriend() {
  nextTick(() => {
    painter.value.canvasToTempFilePath({
      fileType: "jpg",
      pathType: 'url'
    }).then((res) => {
      console.log('canvasToTempFilePath', res.tempFilePath)
      wx.showShareImageMenu({
        path: res.tempFilePath,
        success: () => { },
      })
      state.showSharePoup = false
    })
  })
}

// 分享到朋友圈
function shareFriendcricle() {
  uni.showLoading({
    title: '名片生成中'
  });
  nextTick(() => {
    painter.value.canvasToTempFilePathSync({
      fileType: "jpg",
      pathType: 'url',
      success: (res) => {
        console.log('canvasToTempFilePath', res.tempFilePath)
        state.poster = res.tempFilePath
        if (state.poster) {
          uni.hideLoading();
          state.showSharePoup = false
          state.showPosterModal = true
        }
      }
    })
  })
}

onLoad((options) => {
  state.club_id = options.id
  loadData(options.club_id);
});
</script>

<style lang="scss" scoped>
:deep(.u-mode-center-box) {
  background-color: transparent !important;
}

:deep(.u-model) {
  background-color: transparent !important;
}

.btn {
  flex: 1;
  padding: 14rpx 0;
  text-align: center;
  font-size: 28rpx;
  border-radius: 10rpx;
}

.btn-save {
  color: #F4AF22;
  border: 2rpx solid #F4AF22;
}

.btn-share {
  color: #fff;
  background-color: #F4AF22;
}

.ic-back {
  position: absolute;
  left: 32rpx;
  top: 50%;
  transform: translateY(-50%);
}

.bg-poster {
  border-radius: 12rpx;
  background: radial-gradient(50% 63.99% at 50% 50%, rgba(248, 214, 88, 1) 0%, rgba(245, 181, 41, 1) 100%);
}

.slot-content {
  width: 600rpx;
  padding-bottom: 4rpx;
  // height: 890rpx;
}
</style>
